<script lang="ts" setup>
import vheader from "./vheader.vue"
import sideMenu from "./sideMenu.vue"
import content from "./content.vue"
import { useMessage, useDialog } from "naive-ui"
window.$message = useMessage()
window.$dialog = useDialog()
</script>

<template>
  <div class="home">
    <div class="left">
      <sideMenu />
    </div>
    <div class="right">
      <vheader />
      <main class="router-view">
        <content />
      </main>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  overflow: hidden;
  .left {
    width: 25vw;
    height: 100%;
  }
  .right {
    flex: 1;
    height: 100%;
    .router-view {
      width: 100%;
      height: 92vh;
      //border-left: 1px solid var(--side-menu-border-color);
      // border-top: 1px solid var(--side-menu-border-color);
      transition: all 0.3s var(--n-bezier);
      border-top-left-radius: 10px;
      background-color: var(--bodyBg);
      box-sizing: border-box;
    }
  }
}
</style>
